import { useState } from 'react';
import { Badge, TabBar } from 'antd-mobile';
import { useLocation, useNavigate } from 'react-router-dom'
// 导航菜单图标
import home from '../assets/tabbar/home.png';
import homeActive from '../assets/tabbar/home-active.png';
import cate from '../assets/tabbar/cate.png';
import cateActive from '../assets/tabbar/cate-active.png';
import cart from '../assets/tabbar/cart.png';
import cartActive from '../assets/tabbar/cart-active.png';
import user from '../assets/tabbar/user.png';
import userActive from '../assets/tabbar/user-active.png';


export default function Navbar() {
    // 获取路由location对象
    const location = useLocation();
    // console.log(location);
    let [pathname, setPathname] = useState(location.pathname);
    // console.log(pathname);
    // 获取路由navigate对象
    const navigate = useNavigate();
    // tabbar导航数据
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: pathname === '/home' ? <img src={homeActive} /> : <img src={home} />,
            badge: Badge.dot,
        },
        {
            key: '/cate',
            title: '分类',
            icon: pathname === '/cate' ? <img src={cateActive} /> : <img src={cate} />,
        },
        {
            key: '/cart',
            title: '购物车',
            icon: pathname === '/cart' ? <img src={cartActive} /> : <img src={cart} />,
            badge: '9',
        },
        {
            key: '/user',
            title: '我的',
            icon: pathname === '/user' ? <img src={userActive} /> : <img src={user} />,
        },
    ];

    // tabbar组件change事件处理函数
    const setRouteActive = (value) => {
        // 更新activeKey
        setPathname(value);
        // 实现路由跳转
        navigate(value);
    }
    return (
        <>
            {/* 导航菜单 */}
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)} className='tabbar'>
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        badge={item.badge}
                    />
                ))}
            </TabBar>

            
        </>
    )
}
